/*
 * @Description: h函数学习
 * @Author: wangqi
 * @Date: 2021-05-08 15:15:55
 * @LastEditTime: 2021-05-09 11:41:42
 */
import {
    h,
    init,
    classModule, propsModule, styleModule, eventListenersModule,
} from "snabbdom";

// 创建出patch函数
const patch = init([classModule, propsModule, styleModule, eventListenersModule]);

/*

    h函数使用:
        --(这里参数的不同snabbdom库内部采用重载的形式处理了不同结果)
        
        h(sel, {class:{}, props:{}, style:{}, on:{}, key:'Azz' }, text)
        h(sel, {class:{}, props:{}, style:{}, on:{}, key:'Azz' }, [h()])
        h(sel, {class:{}, props:{}, style:{}, on:{}, key:'Azz' }, h())

    patch函数：
        进行diff算法实现最小更新, 再渲染生成真实Dom

*/


// 通过 h函数生成虚拟节点 (vnode | vdom)
let vNode = h('h4', { class: { "box": true }, props: {}, style: { fontSize: "28px" }, on: { click() { console.log("盒子精~~") }, } }, '我是一个盒子');

let vNode1 = h('ul', { class: { "list": true }, props: {} }, [
    h('li', { props: {} }, [h('a', { props: { href: "javascript:void(0);" } }, '苹果')]),
    h('li', { props: {} }, h('a', { props: { href: "javascript:void(0);" }, style: { fontSize: "28px" } }, '大西瓜')),
]);

console.log(vNode, "vNode1")

let container = document.querySelector("#container");
// 通过patch函数进行diff算法实现最小更新, 再生成真实Dom
patch(container, vNode1);

